<!--
 * @Description: 
 * @Date: 2023-11-01 23:02:09
 * @LastEditTime: 2023-12-22 09:18:50
-->
<template>
	<div class="panoramaDialog" v-click-outside="onClickOutside">
		<div class="panorama-pic">
			<swiper
				slidesPerView="1"
				:modules="modules"
				:navigation="navigation"
				:pagination="{ clickable: true }"
				observer
				loop
				style="width: 100%; height: 100%"
			>
				<swiper-slide v-for="(num, index) in JSON.parse(Props.pics)" :key="index">
					<!-- <a-image style="width: 100%; height: 100%" :src="num" /> -->
					<img style="width: 100%; height: 100%" :src="num" />
				</swiper-slide>
			</swiper>
		</div>
		<div class="panorama-msg">{{ Props.content }}</div>
		<div class="panorama-tool" v-if="Props.type">
			<img @click="handleMp3" src="../../assets/partyBuilding/map3.png" />
			<img src="../../assets/partyBuilding/video.png" />
		</div>
		<div class="panorama-close" @click="onClickOutside">
			<img src="../../assets/partyBuilding/关闭.png" />
		</div>
		<audio ref="audioRef"></audio>
	</div>
</template>
<script setup>
import { getCurrentInstance, ref, defineProps, onMounted } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue'; // swiper所需组件
// 这是分页器和对应方法，swiper好像在6的时候就已经分离了分页器和一些其他工具
import { Navigation, Pagination, A11y } from 'swiper';
// 引入swiper样式，对应css 如果使用less或者css只需要把scss改为对应的即可
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
const { proxy } = getCurrentInstance();
let showPop = ref(true);
let audioRef = ref(null);
const modules = [Pagination, Navigation, A11y];
const navigation = ref({
	nextEl: '.button-next',
	prevEl: '.button-prev'
});
const Props = defineProps({
	content: {
		type: String
	},
	pics: {
		type: String
	},
	piMp3: {
		type: String
	}
});
onMounted(() => {
	audioRef.value.src = Props.piMp3;
});
const vClickOutside = {
	mounted(el, binding) {
		function eventHandler(e) {
			if (el.contains(e.target)) {
				return false;
			}
			// 如果绑定的参数是函数，正常情况也应该是函数，执行
			if (binding.value && typeof binding.value === 'function') {
				binding.value(e);
			}
		}
		// 用于销毁前注销事件监听
		el.__click_outside__ = eventHandler;
		// 添加事件监听
		document.addEventListener('click', eventHandler);
	},
	unmounted(el) {
		// 移除事件监听
		document.removeEventListener('click', el.__click_outside__);
		// 删除无用属性
		delete el.__click_outside__;
	}
};
const onClickOutside = () => {
	proxy.$attrs.cancelButton();
};

function handleMp3() {
	if (audioRef.value.paused) {
		audioRef.value.play(); // 这个就是播放
	} else {
		audioRef.value.pause(); // 这个就是暂停
	}
}
</script>
<style lang="scss">
.panoramaDialog {
	width: 80%;
	height: 80%;
	background: #60151a;
	border: 1px solid rgba(255, 147, 38, 0.35);
	opacity: 1;
	border-radius: 10px;
	position: fixed;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	padding: 10px;
	z-index: 999;
	.panorama-pic {
		width: 100%;
		height: 75%;
		margin-bottom: 10px;
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	.panorama-msg {
		flex: 1;
		width: 100%;
		color: #d5c7a6;
		overflow: auto;
	}
	.panorama-msg::-webkit-scrollbar {
		width: 5px;
		height: 5px;
		background-color: transparent;
	}
	.panorama-msg::-webkit-scrollbar-thumb {
		background-color: #e6d7b1 !important;
	}
	.panorama-tool {
		position: absolute;
		top: 20px;
		left: 30px;
		z-index: 1;
		img {
			margin-right: 10px;
		}
	}
	.panorama-close {
		position: absolute;
		top: -10px;
		right: -10px;
		z-index: 1;
		img {
			width: 40px;
			height: 40px;
			object-fit: cover;
		}
	}
}
:deep(.ant-image) {
	width: 100%;
	height: 100%;
}
</style>
